<template>
  <div class="from_register">
    <div class="promptBox" v-if="Prompt">
      {{Prompt}}
    </div>
    <h3>注册车宜拍账号</h3>
    <div class="inp">
      <input type="text" class="userP" placeholder="请输入手机号" v-model="fromRegister.phone">
      <input type="text" class="provingCode" placeholder="请输入验证码" v-model="fromRegister.provingCode">
      <p class="send">
        <span v-if="fromRegister.timeText === '获取验证码'" class="c1" @click="verificationCode()">
          {{fromRegister.timeText}}
        </span>
        <span class="c2" v-else>
          {{fromRegister.timeText}}
        </span>
      </p>
      <input type="password" class="userPass" placeholder="请输入6-16位密码" v-model="fromRegister.pass">
      <div class="Interlayer">
        <div class="automaticLogon" @click="() => {fromRegister.iShow = !fromRegister.iShow}">
          <i>
            <img v-if="fromRegister.iShow" src="../../../static/img/login/log_auto_unselected.png" alt="">
            <img v-if="!fromRegister.iShow" src="../../../static/img/login/log_auto_selected.png" alt="">
          </i>
          <span>我已阅读并同意</span>
        </div>
        <div class="modifyPassword">
          <p @click="agrShow('http://paimai.ucarcloud.cn/auctionCarCore/car/disclaimer','《车宜拍平台隐私政策》')">1.《车宜拍平台隐私政策》</p>
          <p @click="agrShow('http://paimai.ucarcloud.cn/auctionCarCore/car/rule','《车宜拍平台交易管理规章》')">2.《车宜拍平台交易管理规章》</p>
        </div>
      </div>
      <div class="err">
        <p>{{fromRegister.err}}</p>
      </div>
      <div class="registerBtn" @click="login">
        立即注册
      </div>
      <div class="register">
        <img src="../../../static/img/login/log_go_to_reg.png" alt="">
        <router-link :to="{path:'login'}" tag="span">
          <a href="#">前往登录</a>
        </router-link>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data: () => {
    return {
      fromRegister: {
        iShow: false,
        err: '',
        phone: '',
        pass: '',
        provingCode: '',
        timeText: '获取验证码',
        isUrl: ''
      },
      Prompt: '',
      timer: ''
    }
  },
  watch: {
    Prompt (val, oldVal) {
      if (val !== '') {
        let _this = this
        setTimeout(function () {
          _this.Prompt = ''
        }, 3000)
      }
    }
  },
  methods: {
    // 隐私政策 与 规章的 显示
    agrShow: function (url, tit) {
      this.fromRegister.agrShow = true
      this.fromRegister.isUrl = url
      this.$root.$emit('sendUrl', url, tit)
    },
    // 立即注册
    login: function () {
      let Verification = /^1(3|4|5|7|8)\d{9}$/
      if (!this.fromRegister.phone) {
        this.fromRegister.err = '请输入手机号'
        $('.userP').css('borderColor', '#ff6f3c')
      } else if (Verification.test(this.fromRegister.phone) === false) {
        this.fromRegister.err = '请输入有效的手机号码'
        $('.userP').css('borderColor', '#ff6f3c')
      } else {
        $('.userP').css('borderColor', '')
        if (this.fromRegister.provingCode === '') {
          this.fromRegister.err = '请输入验证码'
          $('.provingCode').css('borderColor', '#ff6f3c')
        } else if (this.fromRegister.iShow) {
          $('.userPass').css('borderColor', '')
          this.fromRegister.err = '请阅读相关政策与规章并同意'
        } else {
          let reg = /^[A-Za-z0-9]{6,16}$/
          if (reg.test(this.fromRegister.pass) === false) {
            this.fromRegister.err = '请输入6-16位字母与数字 密码'
            $('.userPass').css('borderColor', '#ff6f3c')
          } else {
            $('.provingCode').css('borderColor', '')
            this.fromRegister.err = ''
            // 加密
            let password = this.$md5(this.fromRegister.pass)
            // 请求
            this.$http({
              url: 'http://paimai.ucarcloud.cn/auctionCarCore/login/register',
              params: {telphone: this.fromRegister.phone, password: password, verifyCode: this.fromRegister.provingCode}
            }).then(r => {
              switch (r.data.message) {
                case '注册失败,用户已注册，请直接登陆或找回密码':
                  this.Prompt = '用户已注册 , 请前往登录 !'
                  break
                case '注册失败,验证码错误':
                  this.Prompt = '验证码错误!'
                  break
                case '注册成功':
                  this.Prompt = '注册成功!'
                  setTimeout(() => {
                    this.$router.push({path: '/login/login'})
                  }, 500)
                  break
                default:
                  break
              }
            })
          }
        }
      }
    },
    // 获取验证码
    verificationCode: function () {
      clearTimeout(this.timer)
      let _this = this
      var timTex = this
      this.timer = setTimeout(function () {
        let Verification = /^1(3|4|5|7|8)\d{9}$/
        if (!_this.fromRegister.phone) {
          _this.fromRegister.err = '请输入手机号'
        } else if (Verification.test(_this.fromRegister.phone) === false) {
          _this.fromRegister.err = '请输入有效的手机号码'
        } else {
          // 发送请求
          _this.$http({
            url: 'http://paimai.ucarcloud.cn/auctionCarCore/smsTemplate/sendVerifyCode',
            params: {telephone: _this.fromRegister.phone, type: '0'}
          }).then(r => {
            _this.verifyCode = r.data.code
            if (r.data.state !== 'SUCCESS') {
              _this.Prompt = '用户已注册 , 请前往登录 !'
            } else {
              _this.fromRegister.err = ''
              var i = 61
              var timFun = function () {
                i--
                if (i < 10) {
                  i = '0' + i
                }
                timTex.fromRegister.timeText = i + '秒后可重发'
                if (i <= 1 || window.location.hash !== '#/login/register') {
                  timTex.fromRegister.timeText = '获取验证码'
                  clearInterval(setIn)
                  timFun = null
                }
              }
              timFun()
              var setIn = setInterval(timFun, 1000)
            }
          })
        }
      }, 300)
    }
  }
}
</script>

<style lang="scss" scoped>
.from_register{
  float: right;
  width: 420px;
  height: 455px;
  background: #fff;
  margin-top: 76px;
  position: relative;
  .promptBox{
    width: 220px;
    height: 50px;
    line-height: 50px;
    background: rgba(0,0,0,0.7);
    color: #fff;
    text-align: center;
    border-radius: 5px;
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    top: 240px;
    z-index: 1005
  }
  h3{
    padding-left: 20px;
    height: 56px;
    line-height: 56px;
    font-size: 18px;
    color: #333;
    border-bottom: 1px solid #e3e3e3;
  }
  .inp{
    width: 310px;
    margin: 4px auto 0;
    position: relative;
    input{
      width: 288px;
      height: 44px;
      border: 1px solid #e3e3e3;
      color: #333;
      font-size: 14px;
      border-radius: 5px;
      padding-left: 16px;
      margin-top: 24px;
      &:hover{
        border-color: #ff6f3c;
      }
      &:focus{
        border-color: #ff6f3c;
      }
    }
    .send{
      border-left: 1px solid #e3e3e3;
      background: #fff;
      position: absolute;
      height: 20px;
      right: 5px;
      top: 108px;
      width: 120px;
      text-align: center;
      color: #ff6f3c;
      font-size: 14px;
      z-index: 1;
       .c1{
        cursor: pointer;
        display: inline-block;
        position: absolute;
        z-index: 5;
        width: 120px;
        height: 46px;
        line-height: 46px;
        margin-top: -13px;
        left: 0;
      }
      .c2{
        cursor: not-allowed;
        display: inline-block;
        width: 120px;
        height: 46px;
        line-height: 46px;
        margin-top: -13px;
        color: #999;
      }
    }
    .Interlayer{
      overflow: hidden;
      margin-top: 20px;
      color: #666;
      font-size: 14px;
      .automaticLogon{
        cursor: pointer;
        float: left;
      }
      .modifyPassword{
        float: right;
        cursor: pointer;
        p{
          font-size: 14px;
          color: #ff6f3c;
          margin-bottom: 8px;
        }
      }
    }
    .err{
      height: 22px;
      font-size: 14px;
      color: #f51111;
      line-height: 22px;
    }
    .registerBtn{
      cursor: pointer;
      width: 305px;
      height: 44px;
      line-height: 44px;
      text-align: center;
      font-size: 16px;
      color: #fff;
      border-radius: 5px;
      background: #ff6f3c;
    }
    .register{
      cursor: pointer;
      a{
        font-size: 16px;
        color: #ff6f3c;
      }
      float: right;
      margin: 20px 0;
      img{
        vertical-align: -3px;
      }
    }
  }
}
</style>
